<script setup>
import { getGoodsListAPI, addGoods, deleteBanner, updateBanner } from '@/apis/goods'
import { ElMessage, ElMessageBox } from 'element-plus'
//import { id } from 'element-plus/es/locale'
import { onMounted, ref, reactive } from 'vue'

const goodList = ref([])
const dialogImageUrl = ref('')
const goodfrom = reactive({
  title: '',
  price: '',
  num: '',
  category: '',
  descs: '',
  image: '',
})
const pageNum = ref(1)
const pageSize = ref(10)
const goodsName = ref('')
const getGoodsList = async () => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    goodsName: goodsName.value
  }
  const res = await getGoodsListAPI(params)
  total.value = res.data.total
  goodList.value = res.data.records
}
const handleDelete = async (val) => {
  let res = await deleteBanner(val.id)
  if(res.code == 1){
    ElMessage('删除成功!')
    getGoodsList()
  }
  
}
const dialogVisible = ref(false)
const titleName = ref('新增')

const fileList = ref([])
const rowId = ref('')

const onAdd = () => {
  dialogVisible.value = true
  goodfrom.title = ''
  goodfrom.price = ''
  goodfrom.num = ''
  goodfrom.category = ''
  goodfrom.descs = ''
  fileList.value = []
}
const handleEdit = (row) => {
  rowId.value = row.id
  let imgs = []
  imgs.push({url: row.image})
  
  titleName.value = '修改'
  dialogVisible.value = true
  goodfrom.title = row.title
  goodfrom.price = row.price
  goodfrom.num = row.num
  goodfrom.category = row.category
  goodfrom.descs = row.descs
  fileList.value = imgs
}

// 上传文件
const handleSuccess = (response, file, fileList) => {
  goodfrom.image = fileList[0].response.data.url
};

const onSubmit = async () => {
  console.log(rowId, 77888);
  
  let res = null
  if(rowId.value != ''){
    goodfrom.id = rowId
    res = await updateBanner(goodfrom)
  } else {
    goodfrom.id = ''
    res = await addGoods(goodfrom)
  }
  
  if(res.code == 1){
    ElMessage('保存成功！')
    dialogVisible.value = false
    getGoodsList()
  }
}

const onQuery = () => {
  getGoodsList()
}
const total = ref(0)

const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
  pageSize.value = val
  getGoodsList()
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  pageNum.value = val
  getGoodsList()
}

onMounted(() => {
  getGoodsList()
})
</script>

<template>
  <div class="header">
    <el-input v-model="goodsName" placeholder="请输入内容" style="width: 300px;"></el-input>
    <el-button type="primary" @click="onQuery">查询</el-button>
    <el-button type="primary" @click="onAdd">添加</el-button>
  </div>
  <div class="wrapper">
    <el-table :data="goodList" border>
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="商品ID" width="100"> </el-table-column>
      <el-table-column prop="title" label="商品名称" width="100" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="price" label="商品价格" width="100"> </el-table-column>
      <el-table-column prop="num" label="商品数量" width="100"> </el-table-column>
      <el-table-column prop="category" label="规格类目" width="100"> </el-table-column>
      <el-table-column prop="image" label="商品图片" show-overflow-tooltip>
        <template #default="scope">
          <img :src="scope.row.image" alt="" style="width: 215px; height: 125px" />
        </template>
      </el-table-column>
      <el-table-column prop="descs" label="商品描述" show-overflow-tooltip> </el-table-column>
      <el-table-column prop="date" label="操作" width="180">
        <template v-slot="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        :page-sizes="[10, 20, 50, 100]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="margin-top: 20px;"
      />

    <el-dialog
      v-model="dialogVisible"
      :title="titleName"
      width="500"
      :before-close="handleClose"
    >
    <el-form :model="goodfrom" label-width="auto" style="max-width: 600px">
      <el-form-item label="商品名称">
        <el-input v-model="goodfrom.title" />
      </el-form-item>
      <el-form-item label="商品价格">
        <el-input v-model="goodfrom.price" type="number"/>
      </el-form-item>
      <el-form-item label="商品数量">
        <el-input v-model="goodfrom.num" type="number" />
      </el-form-item>
      <el-form-item label="规格类目">
        <el-input v-model="goodfrom.category" />
      </el-form-item>
      <el-form-item label="商品描述">
        <el-input v-model="goodfrom.descs"  type="textarea" />
      </el-form-item>
      <el-form-item label="图片">
        <el-upload
          action="http://192.168.6.21:8080/admin/goods/upload"
          v-model:file-list="fileList"
          list-type="picture-card"
          :on-success="handleSuccess"
          limit="1"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
      </el-form-item>
    </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="onSubmit">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
    
  </div>
</template>

<style lang="less" scoped>
.goods {
  margin: 20px;
}
.header {
  display: flex;
  button {
    margin-left: 20px;
  }
}
.wrapper {
  margin: 20px 0;
}
</style>
